<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <div style="width: 200px;height: 200px;background: red;" v-show="isShow" @mouseover="hideDiv"></div>
    <br>

    <!--使用v:on可以绑定任何事件，可以不是方法，可以直接操作vue实例中的属性值-->
    <div style="width: 200px;height: 200px;background: red;" v-show="isShow" @mouseover="isShow=false"></div>

</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            isShow:true
        },
        methods: { //用来给vue实例定义一些列的相关方法
            hideDiv(){
                this.isShow = false;
            }
        }
    });
</script>